<template>
  <el-card>
    <!-- 输出栏 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <h5>标签名称:</h5>
        <el-input placeholder="请输入" clearable v-model="queryInfo.tags"> </el-input>
      </el-col>
      <el-col :span="6">
        <h5>城市:</h5>
        <el-select v-model="queryInfo.province" placeholder="请选择" @change="getCitys">
          <el-option v-for="item in province" :key="item.id" :label="item" :value="item"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <h5>地区:</h5>
        <el-select v-model="queryInfo.city" placeholder="请选择">
          <el-option v-for="item in city" :key="item.id" :label="item" :value="item"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <h5>企业简称:</h5>
        <el-input placeholder="请输入" clearable v-model="queryInfo.shortName"> </el-input>
      </el-col>
      <el-col :span="6">
        <h5>状态:</h5>
        <el-select placeholder="请选择" v-model="queryInfo.state">
          <el-option key="1" label="启用" value="1"> </el-option>
          <el-option key="0" label="禁止" value="0"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="18">
        <el-button @click="reset">清除</el-button>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button type="success" @click="addUser">新增用户</el-button>
      </el-col>
    </el-row>

    <!-- 警告 -->
    <el-alert :title="totals" type="info" show-icon> </el-alert>
    <!-- 表单 -->
    <el-table :data="companyInfo">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="企业编号" prop="number"></el-table-column>
      <el-table-column label="企业简称" prop="shortName"></el-table-column>
      <el-table-column label="方向" prop="tags"></el-table-column>
      <el-table-column label="创建者" prop="creatorID"></el-table-column>
      <el-table-column label="创建日期" prop="addDate">
        <template slot-scope="scope">
          {{ scope.row.addDate | dateformat }}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remarks"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <p v-if="scope.row.state === 1">启用</p>
          <p v-else>禁用</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle plain size="mini" @click="editCompany(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-close" circle plain size="mini" @click="editState(scope.row)"></el-button>
          <el-button type="warning" icon="el-icon-delete" circle plain size="mini" @click="remove(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 修改公司信息对话框 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="50%">
      <template slot="title">
        <div class="titleZise">编辑用户</div>
      </template>
      <el-form label-width="80px">
        <el-form-item label="企业名称">
          <el-input v-model="editComInfo.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="editComInfo.company"></el-input>
        </el-form-item>
        <a href="https://www.tianyancha.com">https://www.tianyancha.com （在此可查询所属公司全称及简称）</a>
        <el-form-item label="城市地区">
          <el-select placeholder="请选择" v-model="editComInfo.province" @change="getCitys">
            <el-option :label="item" :value="item" v-for="item in province" :key="item.id"></el-option>
          </el-select>
          <br />
          <el-select placeholder="请选择" v-model="editComInfo.city">
            <el-option :label="item" :value="item" v-for="item in city" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）">
          <el-input v-model="editComInfo.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editComInfo.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditParmars">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加用户对话框 -->
    <el-dialog title="编辑用户" :visible.sync="addDialogVisible" width="50%" @close="resetAddDialog">
      <template slot="title">
        <div class="titleZise">编辑用户</div>
      </template>
      <el-form label-width="80px" ref="addFormRef" :model="addForm">
        <el-form-item label="企业名称">
          <el-input v-model="addForm.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="addForm.company"></el-input>
        </el-form-item>
        <a href="https://www.tianyancha.com">https://www.tianyancha.com （在此可查询所属公司全称及简称）</a>
        <el-form-item label="城市地区">
          <el-select placeholder="请选择" v-model="addForm.province" @change="getCitys">
            <el-option :label="item" :value="item" v-for="item in province" :key="item.id"></el-option>
          </el-select>
          <br />
          <el-select placeholder="请选择" v-model="addForm.city">
            <el-option :label="item" :value="item" v-for="item in city" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="addForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCompany">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { provinces, citys } from './citys'
export default {
  name: 'companys',
  data () {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        shortName: '',
        province: '',
        city: '',
        tags: ''
      },
      companyInfo: [],
      total: 0,
      province: provinces(),
      editDialogVisible: false,
      editComInfo: {},
      newstate: 0,
      addDialogVisible: false,

      addForm: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: false,
        state: 1
      },
      value: '',
      // states: [
      //   {
      //     value: 0,
      //     label: '禁用'
      //   },
      //   {
      //     value: 1,
      //     label: '启用'
      //   }
      // ],
      city: [],

      citys
    }
  },
  created () {
    this.getList()
    // console.log(this.queryInfo)
  },
  methods: {
    async getList () {
      const { data: res } = await this.$http.get('companys', { params: this.queryInfo })
      this.companyInfo = res.items
      this.total = res.counts
    },
    getCitys (value) {
      this.addForm.city = ''
      this.city = this.citys(value)
    },
    handleCurrentChange (val) {
      this.queryInfo.pagenum = val
      this.getList()
    },
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getList()
    },
    editCompany (row) {
      // console.log(row)
      this.editComInfo = row
      if (this.editComInfo.isFamous === 1) {
        this.editComInfo.isFamous = true
      } else {
        this.editComInfo.isFamous = false
      }
      this.editDialogVisible = true
      console.log(this.editComInfo)
    },
    async saveEditParmars () {
      // console.log(this.editComInfo)
      await this.$http.put(`/companys/${this.editComInfo.id}`, this.editComInfo)
      this.getList()
      this.editDialogVisible = false
    },
    async remove (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$http.delete(`companys/${id}`)
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editState (row) {
      if (row.state === 1) {
        this.newstate = 0
      } else {
        this.newstate = 1
      }
      this.$confirm('此操作将修改状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/companys/${row.id}/${this.newstate}`)
        this.$message.success('更新状态成功')
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addUser () {
      this.addDialogVisible = true
    },
    async addCompany () {
      await this.$http.post('companys', this.addForm)
      this.$message.success('添加用户成功')
      this.addDialogVisible = false
      this.getList()
    },
    reset () {
      // this.$refs.companyRef.resetFields()
      this.queryInfo.tags = ''
      this.queryInfo.shortName = ''
      this.queryInfo.province = ''
      this.queryInfo.city = ''
      this.queryInfo.state = ''
      // this.getList()
    },
    resetAddDialog () {
      this.addForm.shortName = ''
      this.addForm.company = ''
      this.addForm.remarks = ''
      this.addForm.tags = ''
      this.addForm.province = ''
      this.addForm.city = ''
    },
    getState (value) {
      this.queryInfo.state = value
    }
  },
  computed: {
    totals () {
      return '数据一共' + this.total + '条'
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin: 20px;
}
.el-col h5 {
  float: left;
  margin-right: 10px;
}
.el-col .el-input {
  width: 75%;
  // float: left;
  margin-top: 10px;
}
.el-col .el-select {
  margin-top: 10px;
}
.el-col .el-cascader {
  margin-top: 10px;
}
// .el-col .el-button {
//   margin-top: 10px;
// }
.el-col .el-button:last-of-type {
  float: right;
}
.el-pagination {
  float: right;
}
.titleZise {
  color: #fff;
  font-size: 20px;
}
.el-dialog a {
  margin-left: 80px;
}
</style>
